<template>
	<div class="header">
		<div id="headTitle" class="headertitle">
			<van-row style="flex" id="headertitleRow">
				<van-col span="3">
					<van-cell @click="showPopup">三</van-cell>
				</van-col>
				<van-col span="16">ibox &nbsp;{{time}}</van-col>
				<van-col span="2">
					<button type="button" class="loginButton" id="loginButton"
						@click="toLogin()">{{this.$store.state.username}}</button>
				</van-col>
			</van-row>
			
			
			<van-popup v-model="show" position="left" class="showBox">
				<br>
				<br>
				<van-cell title="首页" is-link url="#/" @click="toHome()"></van-cell>
				<van-cell title="市场" is-link url="#/market" @click="toMarket()"></van-cell>
				<van-cell title="盲盒" is-link url="#/blindbox" @click="toMarket()"></van-cell>
				<van-cell title="我的" is-link url="#" @click="toLogin()"></van-cell>
			</van-popup>
		</div>
		<!-- 		<div class="search">
			<form action="/">
			  <van-search
			    v-model="searchvalue"
			    show-action
			    placeholder="请输入搜索关键词"
				@cancel="onCancel"
				
			  >
			    <template #action>
			      <div @click="onSearch">搜索</div>
			    </template>
			  </van-search>
			</form>
		</div> -->
	</div>

</template>

<script>
	export default {
		name: "Head",
		props: {
			msg: String,
		},
		data() {
			return {
				show: false,
				searchvalue: '',
				time:""
			}
		},
		methods: {
			//跳转首页
			toHome() {
				// this.$router.push("/")
				this.show = false
			},
			//跳转登录
			toLogin(){
				if(this.$store.state.username=="登录"){
					this.$router.push("/login")
				}else{
					this.$router.push("/mine")
					this.show = false
				}
				
			},
			//跳转市场
			toMarket() {
				// this.$router.push("/market")
				this.show = false
			},
			//跳转到盲盒
			toBlindBox(){
				this.show = false
			},
			// 左边导航栏
			showPopup() {
				this.show = true
			},
			
			getCurrentTime() {
				//获取当前时间并打印
				var _this = this;
				let hh = new Date().getHours();
				let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
				let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
				_this.time = hh + ':' + mf + ':' + ss;
				// console.log(_this.time)
			}
		},
		mounted() {
				var _this = this;
				this.timer = setInterval(() => {
					this.getCurrentTime();
				}, 1000);
			},
	}
</script>

<style lang="less" scoped="scoped">
	* {
		margin: 0;
		padding: 0;
	}

	.header {
		width: 100%;
		// background-color: skyblue;

		.headertitle {
			width: 100%;
			height: 45px;
			line-height: 45px;
			font-weight: 700;

			#headertitleRow {
				z-index: 2006;
			}

			.showBox {
				height: 100%;
				width: 200px;
			}
		}

		button {
			width: 80px;
			height: 100%;
			border: none;
			background-color: transparent;
			cursor: pointer;
		}
	}
</style>
